<template>
  <div style="height: 300px">
    <div style="display: inline-block; height: 300px; marginleft: 70px">
      <CloudSlider vertical :default-value="30"></CloudSlider>
    </div>
    <div style="display: inline-block; height: 300px; marginleft: 70px">
      <CloudSlider vertical range :step="10" :default-value="[20, 50]"></CloudSlider>
    </div>
    <div style="display: inline-block; height: 300px; marginleft: 70px">
      <CloudSlider vertical range :marks="marks" :default-value="[26, 37]"></CloudSlider>
    </div>
  </div>
</template>

<script>
  export default {
    title: '4.垂直',
    subTitle: '垂直方向的 Slider。',
    data () {
      return {
        marks: {
          0: '0°C',
          26: '26°C',
          37: '37°C',
          100: {
            style: {
              color: '#f50',
            },
            label: <strong>100°C</strong>,
          },
        },
      }
    },
    methods: {
      handleDisabledChange (disabled) {
        this.disabled = disabled;
      },
    }
  }
</script>

<style lang="scss">
  .code-box-demo .ant-slider {
    margin-bottom: 16px;
  }
</style>